<template>
  <div class="pagestyle">
    <list_controller :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }" 
    ref="zujianname"
    :descQuery="state.shaixuanObj"
    @pagechange="pagechangeChange"
      :options="state.optionsList" :showCaozuo="true">
      <template v-slot:selectNamelist>
        <div style="display: flex;align-items: center;">
          <el-radio-group v-model="state.tabNameData" @change="tabChange">
            <el-radio-button v-for="item in state.tabList" :label="item.name" :value="item.tabIndex" :key="item" />
          </el-radio-group>
          <span style="display: flex;align-items: center;">
            <span style="font-weight: 500;font-size: 14px;margin:0 10px;">分站</span>
           <el-select multiple @change="stationCodeChange" clearable filterable 
           collapse-tags
           v-model="state.stationCode" placeholder="请选择" style="width: 300px;">
             <el-option v-for="item in state.stationmodelList" :key="item.value" :label="item.value+'-'+item.label" :value="item.value">
             </el-option>
           </el-select>
          </span>
        </div>
      </template>
      <template v-slot:listSS="{ row, field }">
        <div v-if="field == 'sensorName'">
          {{ row.sensorName }}
        </div>
        <div v-if="field == 'status'">{{row.status}}</div>
      </template>
      <template v-slot:listSSfilter="{ row, field }">
        <div v-if="field == 'sensorName'">
          <el-cascader style="margin: 10px;" clearable :teleported="false" v-model="state.shaixuanObj.condition"
            @change="elcascaderChange" :options="state.searchTreeList" :props="{
                        children: 'children',
                        value: 'name',
                        label: 'commonField',
                        emitPath: false,
                        checkStrictly: true,
                      }" />
        </div>
        <div v-if="field == 'status'">
          <el-checkbox-group v-model="state.statusListquery" 
          style="display: flex;flex-direction: column;padding: 0 10px;">
            <el-checkbox v-for="city in state.statusList" :key="city" :label="city" :value="city"
              @change="statuscheckboxChange">
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
    </list_controller>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color:#3E464F;margin:0;">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>态势分析</span></h4>
      </template>
      <div>
        <realChartCom :targetTime="state.targetTime" :pointDataList="state.pointDataList" :drawerShow="state.drawerShow"
          :nomoreType="1" :grandType="2"></realChartCom>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import realChartCom from "./listCom/realChartCom.vue";
  import {
    computed,
    onMounted,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import {
    getlistSitesList
  } from '@/api/config'
  const {
    proxy
  } = getCurrentInstance();
  let state = reactive({
    tabNameData: "模拟量",
    statusListquery: [],
    detailsShow: false,
    detailsList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    optionsList: {},
    tabList: [{
        tabIndex: 1,
        name: "模拟量",
      },
      {
        tabIndex: 2,
        name: "开关量",
      },
      {
        tabIndex: 3,
        name: "累计量",
      },
      {
        tabIndex: 4,
        name: "虚拟测点",
      },
    ],
    options: {
      refreshShow: true,
      tableheads: computed(() => table_headers.realPointSimulateDetail),
      listSS: [{
        field: "sensorName",
        filterField: {
          field: "sensorName",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }, {
        field: "status",
        filterField: {
          field: "status",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }],
      flag: "A",
      queryList: {
        autoSearch: true,
        querys: [],
      },
      dataUrl: "/pointData/homeRealPoint",
    },
    options1: {
      tableheads: computed(() => table_headers.realPointSwitchDetail),
      listSS: [{
        field: "sensorName",
        filterField: {
          field: "sensorName",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }, {
        field: "status",
        filterField: {
          field: "status",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }],
      flag: "D",
      queryList: {
        autoSearch: true,
        querys: [

        ],
      },
      dataUrl: "/pointData/homeRealPoint",
    },
    options2: {
      flag: "S",
      tableheads: computed(() => table_headers.realPointAddDetail),
      listSS: [{
        field: "sensorName",
        filterField: {
          field: "sensorName",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }, {
        field: "status",
        filterField: {
          field: "status",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }],
      queryList: {
        autoSearch: true,
        querys: [

        ],
      },
      dataUrl: "/pointData/homeRealPoint",
    },
       options3: {
      flag: "V",
      tableheads: computed(() => table_headers.realPointVirtualDetail),
      listSS: [{
        field: "sensorName",
        filterField: {
          field: "sensorName",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }, {
        field: "status",
        filterField: {
          field: "status",
          filterdiy: true, //自定义筛选表头
          options: [{}]
        },
      }],
      queryList: {
        autoSearch: true,
        querys: [

        ],
      },
      dataUrl: "/pointData/homeRealPoint",
    },
    tempList: [],
    // 表单
    editId: undefined,
    drawerShow: false,
    pointDataList: [],
    targetTime: '',
    conditionsensorName: 'A',
    searchTreeList: [],
    shaixuanObj: {
      flag: "B",
      isPower: false
    }
  });
   function getSelList() {
    getlistSitesList().then(res => {
      state.stationmodelList = Object.keys(res.data).map(item => {
        return {
          label: res.data[item],
          value: item
        }
      })
    })
  }
  getSelList()
  function stationCodeChange(val){
    state.shaixuanObj.stationCodeList=val
    proxy.$refs.zujianname.getData({stationCodeList:val,isPower:false})
  }
  function pagechangeChange(val){
    proxy.$refs.zujianname.getData({isPower:false})
  }
  // 填写分析抽屉
  function getlistPointName() {
    axios
      .post("/hisPointFeed/listPointName", {
        condition: state.conditionsensorName,
      })
      .then((res) => {
        state.searchTreeList = res.data;
      });
    axios.post("/pointData/attainAllStatus", {
      flag: state.conditionsensorName
    }).then((res) => {
      state.statusListquery=res.data
      state.statusList = res.data
    });
  }
  getlistPointName()
  function statuscheckboxChange(e){
    proxy.$refs.zujianname.getData({statusList:state.statusListquery})
  }

  
  state.optionsList = state.options;
  function tabChange(val) {
    state.formData = {};
    state.tabNameData = val;
    if (val == "模拟量") {
      state.optionsList = state.options;
      setTimeout(() => {
        proxy.$refs["zujianname"].getData({
          pageNum: 1,
          pageSize: 10,
          flag: 'A',
          ...state.shaixuanObj
        });
      }, 200);
      state.conditionsensorName = 'A'
      state.tabName = "simulate";
    } else if (val == "开关量") {
      state.optionsList = state.options1;
      setTimeout(() => {
        proxy.$refs["zujianname"].getData({
          pageNum: 1,
          pageSize: 10,
          flag: 'D',
          ...state.shaixuanObj
        });
      }, 200);
      state.conditionsensorName = 'D'
    } else if (val == "累计量") {
      state.optionsList = state.options2;
      setTimeout(() => {
        proxy.$refs["zujianname"].getData({
          pageNum: 1,
          pageSize: 10,
          flag: 'S',
          ...state.shaixuanObj
        });
      }, 200);
      state.conditionsensorName = 'S'
    } else if (val == "虚拟测点") {
      state.optionsList = state.options3;
      setTimeout(() => {
        proxy.$refs["zujianname"].getData({
          pageNum: 1,
          pageSize: 10,
          flag: 'V',
          ...state.shaixuanObj
        });
      }, 200);
      state.conditionsensorName = 'V'
    }
    getlistPointName()
  }

  function elcascaderChange(val) {
    setTimeout(() => {
      proxy.$refs["zujianname"].getData({
        pageNum: 1,
        pageSize: 10,
        flag: state.conditionsensorName,
        ...state.shaixuanObj
      });
    }, 200);
  }

  onMounted(() => {
    proxy.$refs["zujianname"].getData({
      pageNum: 1,
      pageSize: 10,
      flag: state.conditionsensorName,
      ...state.shaixuanObj
    });
  })
</script>
<style lang="scss" scoped>
  :deep(.vxe-table--filter-footer) {
    display: none !important;
  }

  .xiazai {
    position: absolute;
    top: 42px;
    right: 241px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  .pagestyle {
    display: flex;
    justify-content: space-between;
  }
</style>